<template>
  <div class="flSupplyPump" :style="{ height: (fullHeight-115) + 'px' }">
    <div class="top_title">
      {{ monitorPointObj.name }}
    </div>
    <div class="top_leftGyj">
      <div class="content_term" v-for="(item,index) in shipLeftList" :key="index" @click="changeleftCurrentIndex(index,item.id)" :class="{act:currentIndex == index && shipWatch == true}">
        <div class="item_content">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="top_rightGyj">
      <div class="content_term" v-for="(item,index) in shipRightList" :key="index" @click="changeCurrentIndex(index)" :class="{act:currentIndex == index && shipWatch == true}">
        <div class="item_content">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="top_zhuGyj">
      <div class="content_term" @click="zhuPoint" :class="{act:pointWatch == true}">
        <div class="item_content">
          工艺流程
        </div>
      </div>
    </div>
    <div class="top_control">
      <div style="margin-left:24px;position:relative;top:3px;">
        <img src="../image/sun.png" />
      </div>
      <div class="top_font" style="margin-left:10px;"> 15 °C</div>
      <div class="top_font" style="margin-left:15px;">{{ currentDate }}</div>
      <div class="top_right">
        <div style="position:relative;top:5px">
          <img src="../image/sun.png" />
        </div>
        <div class="top_font" style="margin-left:10px;cursor: pointer;" @click="goBack">退出</div>
      </div>
    </div>
    <div class="moveControl">
      <div>
        <span style="color:white;">移动位置：</span>
        <el-switch v-model="moveDrag" active-color="#07799A" inactive-color="#C80010"></el-switch>
      </div>
      <div style="margin-left:20px;">
        <el-button type="primary" @click="editStyle" size="mini" style="cursor: pointer;">保存布局</el-button>
      </div>
    </div>
    <div class="point">
      <el-select v-model="pointVal" placeholder="请选择" size="small" @change="changeWater">
        <el-option v-for="item in monitorPointList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="content">
      <el-row :gutter="24" style="padding:0 45px 0 45px;margin-right:300px;">
        <el-col :span="4" v-if="shipWatch">
          <div class="grid-content bg-purple">
            <div class="left-content" :style="{ height: (fullHeight-290) + 'px' }">
              <div class="run_box">
                <div class="run_tit">{{runPanelObj.name}}</div>
                <div class="param_line" v-for="(i,index) in runPanelObj.param" :key="index" style="margin-top:6px;">
                  <div class="param_name">{{i.displayName==undefined?"":i.displayName}}</div>
                  <div style="display:flex">
                    <div class="param_val" style="margin-right:20px;">
                      {{ i.value }}
                    </div>
                    <div class="param_unit">{{i.unit==undefined?"":i.unit}}</div>
                  </div>
                </div>
              </div>
              <div class="contro_box" style='margin-top:5%;'>
                <div class="contro_tit">{{controPanelObj.name}}</div>
                <div class="param_line" v-for="(i,index) in controPanelObj.param" :key="index" style="margin-top:6px;">
                  <div class="param_name">{{i.displayName==undefined?"":i.displayName}}</div>
                  <div v-if="i.type == 1" style="display:flex">
                    <div class="param_val" style="margin-right:20px;">
                      {{ i.value }}
                    </div>
                    <div class="param_unit">{{i.unit==undefined?"":i.unit}}</div>
                  </div>
                  <div v-if="i.type == 0 && i.enName.indexOf('Reset') ==-1 ">
                    <el-switch v-model="i.index" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                  </div>
                  <div v-if="i.type == 0 && i.enName.indexOf('Reset') !=-1">
                    <el-button type="success" size="mini" @click="handleEdit()" style="padding: 3px 10px;">复位</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="18" style="padding:32px 0px 0px 12%">
          <div class="grid-content bg-purple">
            <div id="center_Line" class="p-event" v-if="pointWatch">
              <div>
                <img class="pointImg" :style="{ height: (fullHeight-300) + 'px' }" :src="monitorPointObj.imagesPath" />
              </div>
              <template v-for="(item, index) in workShipParamList">
                <VueDraggableResizable parent=".p-event" :grid="[10,10]" :x="item.x" :y="item.y" :left="paddingLeft" :key="item+index" :parent="false" w="auto" h="auto" @dragstop="onDragstop" :draggable="moveDrag">
                  <div class="center_box">
                    <div class="param_tit">{{item.name}}</div>
                    <div class="param_line" v-for="(i,index) in item.param" :key="index">
                      <div class="param_name">{{i.displayName.indexOf("#") != -1?i.displayName.slice(3):i.displayName}}</div>
                      <div style="display:flex">
                        <div class="param_val" style="margin-right:3px;">
                          {{ i.value==undefined?"0.00":i.value }}
                        </div>
                        <div class="param_unit">{{i.unit==undefined?"":i.unit}}</div>
                      </div>
                    </div>
                  </div>
                </VueDraggableResizable>
              </template>
            </div>
            <div id="center_Line" class="p-event" v-if="shipWatch">
              <div>
                <img class="shipImg" :style="{ height: (fullHeight-300) + 'px' }" :src="monitorPointObj.imagesPath" />
              </div>
              <template v-for="(item, index) in dataAttribute">
                <VueDraggableResizable parent=".p-event" :grid="[10,10]" :x="item.x" :y="item.y" :left="paddingLeft" :key="item+index" :parent="false" w="auto" h="auto" @dragstop="onDragstop" :draggable="moveDrag">
                  <div class="center_box">
                    <div class="param_tit">{{item.name}}</div>
                    <div class="param_line" v-for="(i,index) in item.param" :key="index">
                      <div class="param_name">{{i.displayName.indexOf("#") != -1?i.displayName.slice(3):i.displayName}}</div>
                      <div v-if="i.type == 1" style="display:flex">
                        <div class="param_val" style="margin-right:3px;">
                          {{ i.value }}
                        </div>
                        <div class="param_unit">{{i.unit==undefined?"":i.unit}}</div>
                      </div>
                      <div v-if="i.type == 0 && i.enName.indexOf('Reset') ==-1 ">
                        <el-switch v-model="switchA" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                      </div>
                      <div v-if="i.type == 0 && i.enName.indexOf('Reset') !=-1">
                        <el-button type="success" size="mini" @click="handleEdit()" style="padding: 3px 10px;">复位</el-button>
                      </div>
                    </div>
                  </div>
                </VueDraggableResizable>
              </template>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import energyAnalyChart from "./../components/energyAnalyChart";
import outletWaterChart from "./../components/outletWaterChart";
import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue';
import {
  searchAllFlParamZone, //分页查询
  modifyFlParamZone,//修改参数分区
} from "@/api/schedule/base/FlParamZone/index";
import {
  assflParam, //增加
} from "@/api/schedule/base/flParam/index";
import {
  getTodayOutflowElectric, //获取今日供水量、今日耗电量、吨水电耗
  searchFlExpendOutput, //能耗分析
  searchFlReportData,//出水压力
  searchFlMonitorPoint,//基本信息
  getRealtimeReportData, //查询最新一条推送数据
} from "@/api/schedule/base/flSupplyPump/index";
import {
  searchFlWorkmanship,
  modifyFlMWorkmanship
} from "@/api/schedule/base/flSupplyWater/index";
import {
  getToken
} from "utils/auth";
import {
  searchflPumpMonitorPoint, //泵房查询
} from "@/api/schedule/base/flOverviewPump/index";
export default {
  components: {
    energyAnalyChart,
    outletWaterChart,
    VueDraggableResizable
  },
  data () {
    return {
      currentIndex: 0,
      centerTopObj: {
        outflowTotalToday: "",
        electricQuantityToday: "",
        powerWaterToday: ""
      },
      moveDrag: false,
      drag: false,
      switchA: "",
      fullHeight: window.innerHeight,
      energyAnalyData: {
        createDateList: [],
        electricQuantityList: [],
        outflowTotalList: [],
        doseList: []
      },
      outletWaterData: {
        createDateList: [],
        outPressureObj: {}
      },
      monitorPointObj: {},
      imagesPath: "",
      //拖曳
      paddingLeft: 0,
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      sizeList: [], // 字体号数组
      list: [], // apiArr带上所有属性的集合
      dataAttribute: [],
      runPanelObj: {},
      controPanelObj: {},
      currentDate: "",
      paramData: {},
      workmanshipList: [],
      workShipParamList: [],
      shipLeftList: [],
      shipRightList: [],
      pointWatch: true,
      shipWatch: false,
      searchId: this.$route.query.id,
      monitorPointList: [],
      pointVal: ""
    }
  },
  mounted () {
    this.getPumpMonitorPoint()
    let date = new Date();
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    if (month < 10) {
      month = "0" + month
    }
    let day = date.getDate()
    if (day < 10) {
      day = "0" + day
    }
    let hours = date.getHours()
    if (hours < 10) {
      hours = "0" + hours
    }
    let Minutes = date.getMinutes()
    if (Minutes < 10) {
      Minutes = "0" + Minutes
    }
    this.currentDate = year + "-" + month + "-" + day + " " + hours + ":" + Minutes
    console.log(this.fullHeight, "aaaaaaaaaaaaa")
    this.initWebsocket()
  },
  methods: {
    getPumpMonitorPoint () {
      let obj = { type: 1 }
      searchflPumpMonitorPoint(obj).then(response => {
        this.monitorPointList = response.data
        if (this.$route.query.id) {
          this.pointVal = this.$route.query.id
        } else {
          this.pointVal = response.data[0].id
        }
        this.handleTodayOutflowElectric(this.pointVal) //获取今日供水量等
        this.handleSearchFlExpendOutput(this.pointVal) //能耗分析
        this.handleSearchFlReportData(this.pointVal) //出水压力
        this.handleSearchFlMonitorPoint(this.pointVal) //基本信息
        this.handleFlWorkmanship(this.pointVal) //获取配置工艺
      }).catch();
    },
    changeWater (e) {
      this.pointVal = e
      this.pointWatch = true
      this.shipWatch = false
      this.handleTodayOutflowElectric(this.pointVal)
      this.handleSearchFlExpendOutput(this.pointVal)
      this.handleSearchFlReportData(this.pointVal)
      this.handleSearchFlMonitorPoint(this.pointVal) //基本信息
      this.handleFlWorkmanship(this.pointVal)
    },
    zhuPoint () {
      this.pointWatch = true
      this.shipWatch = false
    },
    changeleftCurrentIndex (e, id) {
      this.currentIndex = e
      this.pointWatch = false
      this.shipWatch = true
      this.searchId = id
      this.handleParam() //获取参数分区
      this.handleSearchFlMonitorPoint(id)
    },
    handleFlWorkmanship (id) {
      let obj = {
        monitorPointId: id,
      }
      searchFlWorkmanship(obj).then(response => {
        this.workmanshipList = response.data
        let len = this.workmanshipList.length
        if (len <= 4) {
          this.shipLeftList = this.workmanshipList
          this.shipRightList = []
        } else {
          this.shipLeftList = this.workmanshipList.slice(0, 4)
          this.shipRightList = this.workmanshipList.slice(4, len - 1)
        }
        this.handleWaterParam()
      }).catch({

      })
    },
    editStyle () {
      if (this.pointWatch == true && this.shipWatch == false) {
        this.workShipParamList.map(item => {
          let id = item.id
          let obj = new FormData()
          obj.append("x", item.x)
          obj.append("y", item.y)
          modifyFlMWorkmanship(id, obj).then(response => {
            this.$message.success(response)
          }).catch()
        })
      } else {
        this.dataAttribute.map(item => {
          let id = item.id
          let obj = {
            x: item.x,
            y: item.y
          }
          modifyFlParamZone(id, obj).then(response => {
            this.$message.success(response)
          }).catch()
        })
      }
    },
    onDragstop (x, y) {
      console.log(x, y)
      var paramName = document.getElementsByClassName('active')[0].lastChild.childNodes[0].innerText
      if (this.pointWatch == true && this.shipWatch == false) {
        this.workShipParamList.map(item => {
          if (item.name == paramName) {
            item.x = x
            item.y = y
          }
        })
      } else {
        this.dataAttribute.map(item => {
          if (item.name == paramName) {
            item.x = x
            item.y = y
          }
        })
      }
    },
    goBack () {
      this.$router.go(-1);
    },
    handleDropped (obj) {
      console.log(obj);//返回所在位置
    },
    initWebsocket () {
      let socket = new WebSocket("ws://" + "140.249.214.1:9905" + "/socketServer/" + "reportData" + '?token=' + getToken())
      socket.onopen = () => {
        console.log('实时报警已连接', "111111");
      }
      socket.onmessage = (e) => {
        console.log(e.data)
        let obj = JSON.parse(e.data)
        this.getFlParamZone(this.paramData, obj)
      }
      socket.onclose = () => {
        console.log('服务器已经断开');
        this.reconnect();
      }
    },
    reconnect () {
      let that = this
      if (that.limitConnect > 0) {
        that.limitConnect--;
        that.timeConnect++;
        console.log('第' + that.timeConnect + '次重连');
        setTimeout(function () {
          that.initWebsocket();
        }, 2000)
      } else {
        console.log('TCP连接已超时');
      }
    },
    handleWaterParam () {
      let obj = {
        monitorPointId: this.searchId
      }
      assflParam(obj).then(response => {
        let dataList = response.data
        let hasworkShipList = []
        dataList.map(item => {
          if (item.isWorkmanship == 1) {
            hasworkShipList.push(item)
          }
        })
        console.log(this.workmanshipList)
        this.workmanshipList.map(item => {
          let paramList = []
          hasworkShipList.map(it => {
            if (it.workmanshipId == item.id) {
              paramList.push(it)
            }
            item['param'] = paramList
          })
          if (item.x) {
            item.x = item.x
          } else {
            item.x = Math.floor(Math.random() * 675)
          }
          if (item.y) {
            item.y = item.y
          } else {
            item.y = Math.floor(Math.random() * 365)
          }
        })
        let reportObj = {
          monitorPointId: this.searchId,
          type: 1
        }
        getRealtimeReportData(reportObj).then(response => {
          console.log(response.data)
          let obj
          if (response.data.length != 0) {
            obj = response.data[0]
          } else {
            obj = {}
          }
        })
        this.workShipParamList = this.workmanshipList
      }).catch();
    },
    handleParam () {
      assflParam().then(response => {
        this.paramData = response.data
        let reportObj
        if (this.pointWatch == true && this.shipWatch == false) {
          reportObj = {
            monitorPointId: this.searchId,
            type: 1
          }
        } else {
          reportObj = {
            workmanshipId: this.searchId
          }
        }
        getRealtimeReportData(reportObj).then(response => {
          let obj
          if (response.data.length != 0) {
            obj = response.data[0]
            this.centerTopObj.outflowTotalToday = response.data[0].outflowTotalToday
            this.centerTopObj.electricQuantityToday = response.data[0].electricQuantityToday
            this.centerTopObj.powerWaterToday = response.data[0].electricQuantityToday / response.data[0].outflowTotalToday
          } else {
            obj = {}
          }
          this.getFlParamZone(this.paramData, obj)
        })
      }).catch();
    },
    //获取今日供水量、今日耗电量、吨水电耗
    handleTodayOutflowElectric (id) {
      let obj = {
        monitorPointId: id,
        type: 1
      }
      getTodayOutflowElectric(obj).then(response => {
        let todayOutflowElectricData = response.data
        console.log(todayOutflowElectricData)
      }).catch();
    },
    //能耗分析
    handleSearchFlExpendOutput (id) {
      let obj = {
        monitorPointId: id
      }
      let expendOutputData
      searchFlExpendOutput(obj).then(response => {
        expendOutputData = response.data
        let createDateArray = [];
        let electricQuantityArray = [];
        let outflowTotalArray = [];
        let doseArray = [];
        expendOutputData.map(item => {
          createDateArray.push(item.createDate.slice(11))
          electricQuantityArray.push(item.electricQuantity)
          outflowTotalArray.push(item.outflowTotal)
          doseArray.push(item.dose)
        })
        this.energyAnalyData.createDateList = createDateArray
        this.energyAnalyData.electricQuantityList = electricQuantityArray
        this.energyAnalyData.outflowTotalList = outflowTotalArray
        this.energyAnalyData.doseList = doseArray
      }).catch();
    },
    // 说明：出水压力
    handleSearchFlReportData (id) {
      let obj = {
        monitorPointId: id
      }
      let flReportData
      searchFlReportData(obj).then(response => {
        flReportData = response.data
        let createDateArray = []
        let outPressureArray = []
        let pumpParamObjList = []
        let pimpParamobj = {}
        if (flReportData.length != 0) {
          flReportData.map(item => {
            createDateArray.push(item.createDate.slice(11))
            let allParamNameList = Object.entries(item)
            let pumpParamNameList = []
            allParamNameList.map(it => {
              if (it[0].search("Pressure") != -1) {
                pumpParamNameList.push(it)
              }
            })
            let obj = {}
            pumpParamNameList.map(i => {
              obj[i[0]] = i[1]
            })
            pumpParamObjList.push(obj)
            outPressureArray.push(item.outPressure)
          })
          let Nlist = Object.keys(pumpParamObjList[0])
          Nlist.map(it => {
            pimpParamobj[it] = []
          })
          pumpParamObjList.map(item => {
            let aList = Object.keys(item)
            aList.map(it => {
              Nlist.map(i => {
                if (it == i) {
                  pimpParamobj[i].push(item[i])
                }
              })
            })
          })
        }
        this.outletWaterData.createDateList = createDateArray
        this.outletWaterData.outPressureObj = pimpParamobj
      }).catch();
    },
    // 说明：基本信息
    handleSearchFlMonitorPoint (id) {
      if (this.pointWatch == true && this.shipWatch == false) {
        searchFlMonitorPoint(id).then(response => {
          this.monitorPointObj.name = response.data.name
          this.monitorPointObj.imagesPath = "https://test.fenglankeji.cn/" + response.data.imagesPath
        })
      } else {
        let obj = { id: id }
        searchFlWorkmanship(obj).then(response => {
          this.monitorPointObj.name = response.data[0].name
          this.monitorPointObj.imagesPath = "https://test.fenglankeji.cn/" + response.data[0].imageUrl
        })
      }
    },
    //获取参数面板
    getFlParamZone (paramData, socketData) {
      let searchData
      if (this.pointWatch == true && this.shipWatch == false) {
        searchData = {
          monitorPointId: this.searchId
        }
      } else {
        searchData = {
          workmanshipId: this.searchId
        }
      }
      searchAllFlParamZone(searchData).then(response => {
        this.dataAttribute = response.data;
        if (this.pointWatch == true && this.shipWatch == false) {
          this.dataAttribute = this.dataAttribute.filter(item => item.hasOwnProperty('workmanshipId') == false)
        }
        this.dataAttribute.map(item => {
          if (item.param) {
            let paramList = item.param.split(",")
            let Data = paramList.map(
              it => paramData.filter(i => i.id == it)[0]
            );
            console.log(socketData)
            Data.map(item => {
              if (Object.keys(socketData).includes(item.enName)) {
                item.value = socketData[item.enName]
              } else {
                item.value = "0.00"
              }
            })
            item.param = Data
          }
          if (item.x) {
            item.x = item.x
          } else {
            item.x = Math.floor(Math.random() * 675)
          }
          if (item.y) {
            item.y = item.y
          } else {
            item.y = Math.floor(Math.random() * 365)
          }
        })
        this.runPanelObj = {}
        this.controPanelObj = {}
        this.dataAttribute.map(item => {
          if (item.name == "运行参数") {
            this.runPanelObj = item
          }
          if (item.name == "控制面板") {
            this.controPanelObj = item
            console.log(this.controPanelObj)
          }
          item.param = item.param.filter(res => { return res != undefined })
        })
        this.dataAttribute = this.dataAttribute.filter(function (item) {
          return item.name != "运行参数" && item.name != "控制面板"
        });
      }).catch(
      );
    }
  }
}
</script>
<style scope>
.flSupplyPump {
  overflow: hidden;
  background: url("../image/bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.top_leftGyj {
  display: flex;
  position: absolute;
  top: 82px;
  z-index: 999;
}
.top_rightGyj {
  display: flex;
  position: absolute;
  top: 82px;
  right: 270px;
  z-index: 999;
}
.top_zhuGyj {
  display: flex;
  position: absolute;
  top: 82px;
  right: 30px;
  z-index: 999;
}
.top_title {
  position: absolute;
  top: 30px;
  height: 56px;
  width: 100%;
  text-align: center;
  font-size: 58px;
  font-family: PingFang-SC-Heavy, PingFang-SC;
  font-weight: 800;
  color: #ffffff;
  line-height: 48px;
  letter-spacing: 6px;
  background: linear-gradient(360deg, #01c2ce 0%, #5fe1f0 50%, #00b9c5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content_term {
  background: url("../image/box_bg.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 20px;
  width: 115px;
  height: 35px;
  display: flex;
  justify-content: center;
  color: #6efffc;
  cursor: pointer;
}
.item_content {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  line-height: 36px;
}
.act {
  background: #0b9fc6;
  color: #fff;
}
.top_control {
  width: 100%;
  height: 120px;
  display: flex;
  position: relative;
  padding-top: 15px;
  background: url("../image/top_bg.png") no-repeat;
  background-size: 100% 100%;
}
.moveControl {
  position: absolute;
  right: 120px;
  top: 20px;
  display: flex;
  z-index: 999;
}
.top_right {
  position: absolute;
  right: 21px;
  display: flex;
}
.top_font {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #a4a5a6;
  line-height: 36px;
}
.table_title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-left: 24px;
}
.left-content {
  width: 185%;
  padding: 18px;
}
.center_topLine {
  display: flex;
  justify-content: space-around;
}
.box_term {
  background: url("../image/box_bg.png") no-repeat;
  background-size: 100% 100%;
  width: 230px;
  height: 80px;
  display: flex;
}
.box_tit {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #00f1ff;
}
.box_count {
  font-size: 20px;
  font-family: AvenirNext-DemiBold, AvenirNext;
  font-weight: 600;
  color: #53f102;
}
.box_unit {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-left: 20px;
}
.el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
}
.el-table td,
.el-table th.is-leaf {
  border-style: transparent !important;
}
.chart_titlt {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  padding-left: 30px;
}
.el-descriptions-item__label.is-bordered-label {
  background-color: transparent !important;
}
.el-descriptions__body {
  background-color: transparent !important;
}
.right_box {
  margin-top: 10px;
}
/* 拖曳 */
#center_Line {
  position: relative;
  margin-top: 20px;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-between;
}
.pointImg {
  width: 100%;
  margin: -20px 0px 0px 13vw;
}
.shipImg {
  width: 100%;
  margin: -20px 0px 0px 4%;
}
.vdr {
  border: none;
}
.handle,
.active.vdr {
  border: 1px dashed #000;
}
/*  */
.center_box {
  width: 137px;
  background: url("../image/csNsj.png") no-repeat;
  background-size: 100% 100%;
  padding: 8px 10px 16px;
  cursor: move;
}
/*选中样式*/
.chosen {
  border: solid 2px #3089dc !important;
}
.param_line {
  display: flex;
  justify-content: space-between;
}
.param_name {
  font-size: 14px;
  color: #ffffff;
}
.param_val {
  font-size: 14px;
  color: #53f102;
}
.param_unit {
  font-size: 14px;
  color: #ffffff;
}
.left_line {
  margin-top: 5px;
  display: flex;
  justify-content: space-around;
}
.param_tit {
  padding-bottom: 5px;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #06edfc;
}
.run_tit {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  padding-bottom: 5px;
}
.contro_tit {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  padding-bottom: 5px;
}
/* .el-button--mini, .el-button--mini.is-round {
    padding: 3px 10px;
} */
.point {
  position: absolute;
  z-index: 999;
  right: 30px;
  top: 125px;
}
.moniLeft {
  width: 95px;
  text-align: right;
}
.moniRight {
  margin-left: 50px;
}
.moniLabel {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e4e4e4;
  margin-top: 8px;
}
.moniVal {
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  margin-top: 8px;
}
</style>